<template>
  <div class="goods-relevant">
    <div class="header">
      <i class="icon" />
      <span class="title">同类商品推荐</span>
    </div>
    <!-- 此处使用改造后的xtx-carousel.vue -->
    <HomeBanner :autoPlay="true" :bannerList="shopBannerObj"></HomeBanner>
  </div>
</template>

<script>
import HomeBanner from "@/components/home/homeBanner.vue";
import { shopBanner } from "@/api/goods";
import { ref } from "vue";
export default {
  // 同类推荐，猜你喜欢
  name: "GoodsRelevant",

  setup() {
    let shopBannerObj = ref([]);
    shopBanner({ id: 1564054, limit: 16 }).then(({ result }) => {
      // 需要的结构 是 shopBannerObj = [[4个],[4个],[4个]]
      //   我们需要每组4 条数据
      const pageSize = 4;
      //   数据的总长度除以4 的出 每组几条数据
      const pageCount = Math.ceil(result.length / pageSize);
      // 循环  便利4次
      for (let i = 0; i < pageCount; i++) {
        //   然后往空数组里面push
        shopBannerObj.value.push(
          //每条数据进行截取
          //  pageSize * i  4 * 0 =  4   4*1=4   4*2 = 8 每次从第一个数据开始截取
          //  pageSize * (i + 1)   这个就是 每次循环加上 4 条数据 的基础 上在乘以 2
          //   4 * （0 +1） == 4*1 = 4     4 * （1+1） == 4 * 2
          result.slice(pageSize * i, pageSize * (i + 1))
        );
      }
      console.log(shopBannerObj.value);
    });

    return { shopBannerObj };
  },
  components: {
    HomeBanner,
  },
};
</script>

<style scoped lang="scss">
// 在这个组件里 改一下 轮播图的结构
:deep(.xtx-carousel) {
  height: 380px;
  .carousel {
    &-indicator {
      bottom: 30px;
      span {
        &.active {
          background: $xtxColor;
        }
      }
    }
    &-btn {
      top: 110px;
      opacity: 1;
      background: rgba(0, 0, 0, 0);
      color: #ddd;
      i {
        font-size: 30px;
      }
    }
  }
}
.goods-relevant {
  background: #fff;
  min-height: 460px;
  margin-top: 20px;
  .header {
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    .title {
      font-size: 20px;
      padding-left: 10px;
    }
    .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      border-top: 4px solid $xtxColor;
      border-right: 4px solid $xtxColor;
      box-sizing: border-box;
      position: relative;
      transform: rotate(45deg);
      &::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 2px;
        background: lighten($xtxColor, 40%);
      }
    }
  }
}
</style>
